<template>
    <view class="container">
        <view class="top-wrapper">
            <view class="row">
                <u-image src="/static/images/smart-android.png" width="171" height="171"></u-image>
                <view class="u-flex-1 u-margin-left-20">
                    <view class="welcom">Hi~ {{ userInfo.nickname || userInfo.merchantName }}</view>
                    <view class="welcom-sen">欢迎来到超凡云仓智能客服</view>
                </view>
            </view>
            <view class="search-bar" @click="search">
                <u-icon name="search" size="32"></u-icon>
                <text class="search-text">请输入要查询的内容</text>
            </view>
            <!-- 自助服务 -->
            <view class="self-service">
                <view class="wrapper-title"> 自助服务 </view>
                <u-grid col="4" :border="false">
                    <template v-for="(item, index) in list">
                        <u-grid-item @click="orderManger(item)">
                            <view class="icon" :class="item.icon"></view>
                            <view class="option-name">{{ item.name }}</view>
                        </u-grid-item>
                    </template>
                </u-grid>
            </view>
            <!-- 问题类别 -->
            <view class="questions">
                <scroll-view scroll-x class="scroll-x">
                    <view class="scroll-inner-warp">
                        <template v-for="(item, index) in cates">
                            <view class="scroll-item" :class="{ actived: current == index }" @click="help(item, index)">{{ item.name }}</view>
                        </template>
                    </view>
                </scroll-view>
                <!-- 问题列表 -->
                <view class="questions-list">
                    <template v-for="(item, index) in questions">
                        <view class="question-items" v-if="showmore || index < 5" @click="QuestionDtl(item)">
                            <text class="">{{ index + 1 + '. ' + item.question }}</text>
                            <text class="icon icon-right" style="color: #999"></text>
                        </view>
                    </template>
                </view>
                <view class="show-more" @click="showmore = !showmore" v-if="!showmore && questions.length > 5">
                    查看更多
                    <u-icon name="arrow-down"></u-icon>
                </view>
            </view>
        </view>
        <holder height="120"></holder>
        <view class="service">
            <u-button type="d" shape="circle" @click="router('imChat')">
                <text class="icon">&#xe632;</text>
                <text class="u-margin-left-20">在线客服</text>
            </u-button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { computed, ref } from 'vue'

const userStore = useUserStore()

const list = ref([
    {
        key: '待发货',
        name: '我要退货',
        icon: 'refund'
    },
    {
        key: '待付款',
        name: '取消订单',
        icon: 'cancel'
    },
    {
        key: '待收货',
        name: '查看物流',
        icon: 'wuliu'
    },
    {
        key: '全部',
        name: '我的订单',
        icon: 'order'
    }
])

const cates = ref<Array<any>>([])

const questions = ref<Array<any>>([])

const current = ref(0)

const showmore = ref(false)

const query = ref({
    classificationId: undefined,
    current: 1,
    size: 10
})

const userInfo = computed(() => {
    return userStore.userInfo
})

const search = () => {
    uni.$u.$MRouter.helpCenter.to()
}

const orderManger = ({ key }: { key: string }) => {
    uni.$u.$MRouter.orderManager.to({ name: key })
}

const QuestionDtl = ({ id }: { id: number | string }) => {
    uni.$u.$MRouter.QA.to({ id })
}

const help = (item: any, index: number) => {
    current.value = index
    showmore.value = false
    query.value.classificationId = item.id
    getQuestionList()
}

/** 问题列表 */
const getQuestionList = () => {
    let para = query.value
    uni.$u.$api.BaseApi.queryQuestionList(para).then((res: any) => {
        if (para.current === 1) questions.value = []
        questions.value = questions.value.concat(res.records)
    })
}

const router = (name: string, para = {}) => {
    uni.$u.$MRouter[name].to(para)
}

uni.$u.$api.BaseApi.queryQAClassificationList().then((res: any) => {
    cates.value = res.map((m: any) => {
        return {
            id: m.id,
            name: m.name
        }
    })
    // 进入页面的时候 默认需要加载 第一个分类下的列表
    query.value.classificationId = cates.value[0].id
    getQuestionList()
})
</script>

<style scoped lang="scss">
.container {
    // padding: 20rpx 30rpx;
    .top-wrapper {
        background-image: url(@/static/images/smartServerBG.png);
        background-size: 100% 482px;
        background-repeat: no-repeat;
        padding: 20rpx;
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30rpx 30rpx;
            
            .welcom {
                font-size: 40rpx;
                font-weight: bold;
                line-height: 60rpx;
            }
            .welcom-sen {
                font-size: 28rpx;
                line-height: 60rpx;
                color: #666666;
            }
        }
        .search-bar {
            background-color: rgba(255, 255, 255, 0.6);
            padding: 20rpx 30rpx;
            color: #666666;
            border-radius: 20rpx;
            margin-top: 20rpx;
            .search-text {
                margin-left: 30rpx;
            }
        }
        .self-service {
            background-color: white;
            margin-top: 20rpx;
            border-radius: 30rpx;
            padding: 20rpx;
            .wrapper-title {
                font-size: 34rpx;
                color: #666666;
                border-left: 4px solid #f32955;
                padding-left: 20rpx;
            }
            .option-name {
                margin-top: 20rpx;
            }
        }
        .questions {
            margin-top: 20rpx;
            border-radius: 30rpx;
            background-color: white;
            padding: 20rpx;
            .scroll-x {
                width: 120vw;
                .scroll-inner-warp {
                    display: flex;
                    .scroll-item {
                        margin-right: 50rpx;
                        padding: 16rpx 10rpx;
                        border-radius: 50rpx;
                        background-color: white;
                    }
                    .actived {
                        background-color: #fef5f7;
                        color: #fc4f75;
                    }
                }
            }
            .questions-list {
                margin-top: 20rpx;
            }
            .question-items {
                line-height: 60rpx;
                font-size: 30rpx;
                display: flex;
                justify-content: space-between;
                border-top: 1rpx dashed #d8d8d8;
                padding: 10rpx 0;
                &:last-child {
                    border-bottom: 1rpx dashed #d8d8d8;
                }
            }
            .show-more {
                margin-top: 10rpx;
                text-align: center;
                font-size: 24rpx;
                color: #999999;
                line-height: 60rpx;
            }
        }
    }

    .service {
        background-color: white;
        position: fixed;
        width: 100vw;
        padding: 20rpx 30rpx;
        left: 0;
        bottom: 0;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
    }
    .refund::after {
        content: '\e63c';
        color: #f32955;
        font-size: 56rpx;
    }
    .wuliu::after {
        content: '\e646';
        color: #f32955;
        font-size: 56rpx;
    }
    .cancel::after {
        content: '\e626';
        color: #f32955;
        font-size: 56rpx;
    }
    .order::after {
        content: '\e627';
        color: #f32955;
        font-size: 56rpx;
    }
}
</style>
